<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': false } }"
    @cancel="visible = false"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button @click="visible = false">关闭</a-button>
    </template>
    <div class="row-header">
      <div>
        <img :src="amazonIcon" width="37px" height="37px" />
        <span class="name-font">Amazon</span>
      </div>
      <div>提示：如下店铺订单同步异常，请尽快查看处理。</div>
    </div>
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      :rowKey="row=>row.storeId"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="loading"
      :rowSelection="null"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
    <!-- 异常原因 -->
      <template slot="errorMsgSlot" slot-scope="text">
        <a-tooltip :title="text">
          <div class="error-msg">
            {{ text }}
          </div>
        </a-tooltip>
      </template>
      <template slot="createTimeSlot" slot-scope="text">
         {{moment(text).format('YYYY-MM-DD HH:mm')}}
      </template>
    </a-table>
  </j-modal>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  mixins: [mixinDevice, JeecgListMixin],
  data() {
    return {
      title: '店铺异常提示页',
      width: 800,
      visible: false,
      amazonIcon: require('@/assets/oms/amazon.png'),
      disableMixinCreated: true,
      columns: [
        {
          title: '店铺名称',
          align: 'center',
          dataIndex: 'storeName',
        },
        {
          with: 400,
          title: '异常原因',
          align: 'center',
          dataIndex: 'errorMsg',
          scopedSlots: { customRender: 'errorMsgSlot' },
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'createTime',
          scopedSlots:{customRender:'createTimeSlot'},
        },
      ],
      url: {
        list: '/oms/order/amzOrderInfo/queryOrderSyncError',
      },
    }
  },
  methods: {
    moment,
    showLoad() {
      getAction(this.url.list).then((res) => {
        if (res.success) {
          this.dataSource = res.result || []
          if (this.dataSource && this.dataSource.length > 0) {
            this.visible = true
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-tbody > tr > td {
  padding: 10px !important;
}
.name-font {
  margin-left: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.row-header {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  & > div:first-child {
    width: 150px;
  }
  & > div:nth-child(2) {
    width: calc(100% - 150px);
    height: 35px;
    line-height: 35px;
    background: #ffeed6;
    color: #f44f00;
    border: 1px solid #fcc8b0;
    padding-left: 10px;
    border-radius: 4px;
  }
}
/deep/.ant-alert.ant-alert-no-icon {
  width: 100% !important;
}
.error-msg {
  width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
</style>